<template>
        <div class="talik">
            <button @click="getLove">获取一句土味情话</button>
            <ul>
                <li v-for="item in talik" :key="item.id">{{ item.title }}</li>
            </ul>
        </div>
</template>
    
<script setup lang='ts'>

import { uselovetalikStroe } from '@/store/lovetalik'
// storeToRefs 数据响应
import { storeToRefs } from 'pinia';

const talikStore = uselovetalikStroe()
// console.log(talikStore.talik);

let { talik } = storeToRefs(talikStore)
//  pinia对state的订阅监听$subscribe
talikStore.$subscribe((mutate,state) => {
    console.log('数据发生变化',mutate,state);
    localStorage.setItem('talik',JSON.stringify(state.talik))
})
// 数据
// let talik = reactive([
//         { id: '01', title: '你今天有点怪，哪里怪？怪好看的！' },
//         { id: '02', title: '草莓、蓝莓、蔓越莓、你想我了没？' },
//         { id: '03', title: '心里给你留了一块地，我的死心塌地...' },
        
// ])
// 方法
 function getLove() {
   talikStore.getAtalik()
}
</script>
    
<style>
    .talik{
        background-color: orange;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        select,button{
            margin:0 10px;
            height: 25px;
        }
    }
</style>